<template>
	<div class="add-shelves-case">
		<div class="goods-top-menu">
			<div class="goods-menu-left">
				<div class="all-check"><el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox></div>
			</div>

			<div class="goods-menu-right">
				<refresh-button @refresh="refreshPage"></refresh-button>
				<search-view :option="searchOption" @value="goSearch" @clear="refreshPage"></search-view>
			</div>
		</div>
		<div class="goods-list">
			<div class="goods-item" v-for="(item, index) in caseList" :key="index">
				<div class="goods-checkbox"><el-checkbox v-model="item.checkbox" :disabled="item.disabled" @change="onDelCheckbox(item.case_id)"></el-checkbox></div>
				<div class="goods-content" @click="checkboxClick(item)">
					<ImgPopover style="margin-top: 5px;" :src="item.image_middle"></ImgPopover>
					<div class="text-info">
						<el-tooltip placement="top" effect="light" :content="item.goods_name">
							<p class="goods-name">{{ item.goods_name }}</p>
						</el-tooltip>
						<el-tooltip placement="top" effect="light" :content="item.case_name">
							<p class="goods-sn">案例名称：{{ item.case_name }}</p>
						</el-tooltip>
						<p class="add-time">上架时间：{{ item.add_time }}</p>
						<div class="text-bottom">
							<p style="color: red;">风格：{{ item.style_name }}</p>
							<p style="color: #ef8200;">空间：{{ item.space }}</p>
						</div>
						
					</div>
				</div>
			</div>
		</div>
		<div class="pages"><el-pagination background layout="prev, pager, next, jumper" :page-size="50" :total="total" @current-change="init" :current-page="page"></el-pagination></div>
		<div style="padding: 20px 10px;">
			<el-button @click="cancel()">取 消</el-button>
			<el-button type="primary" @click="addFabricClick">确 定</el-button>
		</div>
	</div>
</template>

<script>
import ImgPopover from '@/components/ImgPopover';
export default {
	components: {
		ImgPopover
	},
	props: {
		layerid: {
			type: String,
			default: ''
		},
		shelf_id: {
			type: Number,
			default: 0
		},
		goods_type: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			checkAll: false,
			total: 0,
			page: 0,
			classSelect: 0, // 分类搜索
			selectContent: '', // 搜索输入框的值
			searchOption: [{ value: 0, label: '名字' }],
			caseList: [],
			limit:50,
			caseCheckboxList:[],//保留选中
			allLength:0,
			caseDisabledList:[]//回显已选中不给
		};
	},
	methods: {
		init(e) {
			this.page = e;
			let data = {
				page: e - 1 ? e - 1 : 0,
				limit: this.limit,
				order_by: 'add_time',
				asc: 1,
			};

			if (this.classSelect == 0) {
				data.keyword = this.selectContent;
			}
			this.onPushData();
			this.onSetData();
			this.$http(this.$ApiList.caseList, data).then(res => {
				const { data, count } = res.datas
				this.caseList = data.map(item=>{
					item.checkbox = false;
					item.disabled = false;
					return item;
				})
				this.onSelectState();
				this.onSetEcho();
				this.total = count;
				if(this.allLength === this.limit){
					this.checkAll = true;
				}else{
					this.checkAll = false;
				}
			});
		},
		addFabricClick() {
			this.onPushData();
			this.onSetData();
			if (this.caseCheckboxList.length == 0) {
				this.$layer.msg('至少选择一件商品');
				return;
			}
			let data = {
				shelf_id: this.shelf_id,
				goods_type: this.goods_type,
				goods_ids: this.caseCheckboxList.join(',')
			};

			this.$http(this.$ApiList.ShelfGoodsAdd, data).then(res => {
				this.$layer.msg(res.datas);
				this.init();
				this.checkAll = false;
				this.$parent.init();
				this.cancel();
			});
		},
		checkboxClick(item) {
			if(item.disabled){
				this.$message.error('此案例已关联！')
				return false;
			}
			if (item.checkbox) {
				item.checkbox = false;
			} else {
				item.checkbox = true;
			}
		},
		refreshPage() {
			this.checkAll = false;
			this.page = 1;
			this.selectContent = '';
			this.classSelect = '';
			this.init();
		},
		goSearch(classSelect, selectContent) {
			this.classSelect = classSelect;
			this.selectContent = selectContent;
			this.init();
		},
		cancel() {
			this.$layer.close(this.layerid);
		},
		handleCheckAllChange() {
			if (this.checkAll) {
				this.caseList.forEach(item => {
					item.checkbox = true;
				});
			} else {
				this.caseList.forEach(item => {
					if(!item.disabled){
						item.checkbox = false;
						this.onDelCheckbox(item.case_id)
					}
				});
			}
		},
		// 添加选中的数据
		onPushData(){
			this.caseList.forEach(item => {
				if (item.checkbox) {
					this.caseCheckboxList.push(item.case_id);
				}
			});
		},
		// 保留已选中的状态
		onSelectState(){
			let allLength = 0
			if(this.caseCheckboxList.length){
				this.caseList = this.caseList.map(item=>{
					this.caseCheckboxList.forEach(data=>{
						if(item.case_id == data){
							this.$set(item,'checkbox',true);
							allLength ++
						}
					})
					return item;
				})
			}
			this.allLength = allLength;
		},
		// 保留的数据去重
		onSetData(){
			if(this.caseCheckboxList.length){
				this.caseCheckboxList = Array.from(new Set(this.caseCheckboxList));
			}
		},
		onDelCheckbox(goods_id){
			this.caseCheckboxList.forEach((data,index)=>{
				if(data == goods_id){
					this.caseCheckboxList.splice(index,1);
				}
			})
		},
		// 打开后回显
		initSelect(){
			let data = {
				page:0,
				shelf_id:this.shelf_id,
				goods_type:this.goods_type,
				order_by:"shelf_goods_id",
				asc:2,
				limit:100
			}
			this.caseDisabledList = [];
			this.$http(this.$ApiList.ShelfGoodsList, data).then(res => {
				res.datas.data.forEach(item=>{
					this.caseDisabledList.push(item.goods_id)
				})
			}).then(()=>{
				this.init();
			})
		},
		onSetEcho(){
			if(this.caseDisabledList.length){
				this.caseList.forEach(item=>{
					this.caseDisabledList.forEach(data=>{
						if(item.case_id == data){
							this.$set(item,'checkbox',true);
							this.$set(item,'disabled',true);
						}
					})
				})
			}
		}
	},
	created() {
		this.initSelect();
	}
};
</script>
<style lang="scss">
.add-shelves-case {
	width: 100%;
	padding: 20px 20px;
	.goods-top-menu {
		display: flex;
		.goods-menu-left {
			flex: 1;
			display: flex;
		}
		.goods-menu-right {
			flex: 2;
			display: flex;
			display: flex;
			flex-direction: row-reverse;
		}
		.all-check {
			margin-right: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.client-view {
			margin-right: 10px;
			width: 120px;
		}
	}
	.pages {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.goods-list {
		padding: 10px 0;
		display: flex;
		flex-wrap: wrap;
		.goods-checkbox {
			width: 16px;
			margin-right: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
		}
		.goods-item {
			padding: 15px 10px;
			margin-top: 10px;
			margin-right: 10px;
			display: flex;
			width: 370px;
			height: 140px;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			border-radius: 4px;
			cursor: pointer;
			box-sizing: border-box;
			.goods-content {
				display: flex;
				.img-popover img {
					width: 100px !important;
					height: 100px !important;
				}
			}
		}
	}
	.text-info {
		width: 210px;
		margin-left: 10px;
		.goods-name,
		.goods-sn {
			line-height: 30px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.add-time{
			line-height: 30px;
		}
	}
	.text-bottom {
		display: flex;
		line-height: 30px;
	}
	.text-bottom p {
		flex: 1;
	}
}
</style>
